<!DOCTYPE html>
<html>
<head>
  <title>Generate Gitee Notification Icons</title>
</head>
<body>
  <canvas id="canvas16" width="16" height="16"></canvas>
  <canvas id="canvas48" width="48" height="48"></canvas>
  <canvas id="canvas128" width="128" height="128"></canvas>
  <script>
    function drawIcon(canvas, size) {
      const ctx = canvas.getContext('2d');
      const scale = size / 128;
      
      ctx.clearRect(0, 0, size, size);
      
      // 绘制渐变背景
      const gradient = ctx.createLinearGradient(0, 0, size, size);
      gradient.addColorStop(0, '#c71d23');    // Gitee红色
      gradient.addColorStop(1, '#a01418');    // 深红色
      
      ctx.beginPath();
      ctx.arc(size/2, size/2, size/2, 0, Math.PI * 2);
      ctx.fillStyle = gradient;
      ctx.fill();

      // 添加光泽效果
      const shine = ctx.createRadialGradient(
        size*0.3, size*0.3, size*0.1,
        size*0.5, size*0.5, size*0.8
      );
      shine.addColorStop(0, 'rgba(255,255,255,0.2)');
      shine.addColorStop(1, 'rgba(255,255,255,0)');
      
      ctx.beginPath();
      ctx.arc(size/2, size/2, size/2, 0, Math.PI * 2);
      ctx.fillStyle = shine;
      ctx.fill();

      // 绘制 Gitee 标志和通知图标的组合
      ctx.save();
      ctx.translate(size/2, size/2);
      ctx.scale(scale, scale);

      // 绘制通知圆点
      ctx.beginPath();
      ctx.arc(30, -30, 15, 0, Math.PI * 2);
      ctx.fillStyle = '#fff';
      ctx.fill();

      // 绘制 G 字母（简化的 Gitee logo）
      ctx.beginPath();
      ctx.moveTo(-20, -25);
      ctx.quadraticCurveTo(-30, -25, -30, -15);
      ctx.lineTo(-30, 15);
      ctx.quadraticCurveTo(-30, 25, -20, 25);
      ctx.lineTo(20, 25);
      ctx.quadraticCurveTo(30, 25, 30, 15);
      ctx.lineTo(30, 0);
      ctx.lineTo(0, 0);
      ctx.lineTo(0, 10);
      ctx.lineTo(15, 10);
      ctx.lineTo(15, 15);
      ctx.quadraticCurveTo(15, 20, 10, 20);
      ctx.lineTo(-20, 20);
      ctx.quadraticCurveTo(-25, 20, -25, 15);
      ctx.lineTo(-25, -15);
      ctx.quadraticCurveTo(-25, -20, -20, -20);
      ctx.lineTo(20, -20);
      ctx.quadraticCurveTo(25, -20, 25, -15);
      ctx.lineTo(25, -10);
      ctx.lineTo(30, -10);
      
      ctx.fillStyle = '#ffffff';
      ctx.fill();

      // 添加数字 1 到通知圆点
      ctx.fillStyle = '#c71d23';
      ctx.font = 'bold 20px Arial';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText('1', 30, -30);

      ctx.restore();

      // 添加阴影效果
      ctx.shadowColor = 'rgba(0,0,0,0.3)';
      ctx.shadowBlur = size * 0.1;
      ctx.shadowOffsetX = 0;
      ctx.shadowOffsetY = size * 0.05;
      
      // 下载图标
      const link = document.createElement('a');
      link.download = `icon${size}.png`;
      link.href = canvas.toDataURL('image/png');
      link.click();
    }

    // 生成三种尺寸的图标
    drawIcon(document.getElementById('canvas16'), 16);
    drawIcon(document.getElementById('canvas48'), 48);
    drawIcon(document.getElementById('canvas128'), 128);
  </script>
</body>
</html> 